<template>
  <transition name="height">
    <div v-show="value" class="grid-container">
      <div class="content-wrapper" :class="{ 'flex': flex }">
        <slot />
      </div>
    </div>
  </transition>
</template>

<script setup>
const props = defineProps({
  value: {
    type: Boolean,
    default: true
  },
  flex: {
    type: Boolean,
    default: false
  }
})

</script>

<style scoped lang="scss">
.grid-container {
  display: grid;
  grid-template-rows: 1fr;
  transition: all 0.3s ease-in-out;
}

.content-wrapper {
  min-height: 0;
  overflow: hidden;
}

.height-enter-from,
.height-leave-to {
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-10px);
}

.height-enter-active,
.height-leave-active {
  transition: all 0.3s ease-in-out;
}

</style>
